<template>
    <div class="bidadd">
        <div class="tt">
            发布采购
        </div>
        <div class="form">
            <div class="label w50">
                <p>采购项目标题</p>
                <el-input v-model="input" placeholder="请输入采购项目的标题名称"/>
            </div>
            <div class="label w50">
                <p>采购类型</p>
                <el-select class="m-2" placeholder="请选择采购项目类型" size="large" style="width: 100%;">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>

            <div class="bgyi">
                <!--         表头-->
                <div class="biao-top">
                    <div>商品名称</div>
                    <div>规格</div>
                    <div>数量</div>
                    <div>操作</div>
                </div>
                <div v-for="(item,index) in items" :key="index" class="biao-box">
                    <div class="div">
                        <el-input v-model="item.title" placeholder="商品名称" style="width: 100%;"></el-input>
                    </div>
                    <div class="div">
                        <el-input v-model="item.scoke" placeholder="规格" style="width: 100%;"></el-input>
                    </div>
                    <div class="div">
                        <el-input v-model="item.num" placeholder="数量" style="width: 100%;"></el-input>
                    </div>

                    <div class="div">

                        <el-icon @click="NoArray(index)">
                            <DeleteFilled/>
                        </el-icon>

                    </div>
                </div>
            </div>
            <div class="tjgg" style="margin-top: 20px" @click="addNewArray">
                <div>添加一行</div>
            </div>


            <div class="label w100">
                <p>发布类型</p>
                <el-radio-group v-model="type">
                    <el-radio label="1" size="large">公开招标</el-radio>
                    <el-radio label="2" size="large">邀请招标</el-radio>
                </el-radio-group>
            </div>


            <div v-if="type == 2" class="bgyi1">
                <!--         表头-->
                <div class="biao-top">
                    <div>序号</div>
                    <div>供应商名称</div>
                    <div>负责人信息</div>
                    <div>行业分类</div>
                    <div>操作</div>
                </div>
                <div v-for="(item,index) in supplier" :key="index" class="biao-box">
                    <div class="div">{{ index + 1 }}</div>
                    <div class="div">
                        {{ item.title }}
                    </div>
                    <div class="div">
                        {{ item.name }} {{ item.tel }}
                    </div>
                    <div class="div">
                        {{ item.catname }}
                    </div>
                    <div class="div">

                        <el-icon @click="NoArrays(index)">
                            <DeleteFilled/>
                        </el-icon>

                    </div>
                </div>
                <div class="tjgg" style="margin-top: 20px" @click="dialogVisible = true">
                    <div>添加供应商</div>
                </div>
            </div>


            <div class="label w50">
                <p>开始时间</p>
                <el-date-picker
                    v-model="starttime"
                    :size="size"
                    placeholder="开始时间"
                    style="width: 100%;"
                    type="date"
                />
            </div>
            <div class="label w50">
                <p>结束时间</p>
                <el-date-picker
                    v-model="endtime"
                    :size="size"
                    placeholder="结束时间"
                    style="width: 100%;"
                    type="date"
                />
            </div>
            <div class="label w100" style="margin-top: 10px;">
                <p>结束时间</p>

                <TEditor ref="editor" v-model="content" :disabled='disabled' @getContent="getContent"/>
            </div>

            <div class="label w100" style="margin-top: 10px;">
                <el-button type="primary">提交</el-button>
            </div>

        </div>




        <el-drawer
            v-model="dialogVisible"
            :before-close="handleClose"
            :direction="direction"
            title="添加供应商"
        >
            <div class="dialog">
                <div class="search">
                    <el-input v-model="input" placeholder="输入供应商名称搜索"></el-input>
                    <el-button type="primary">搜索</el-button>
                </div>
                <div class="yfmblist">
                    <div class="yfmblist-haeder">
                        <div class="yfmblist-haeder-item">
                            供应商名称
                        </div>
                        <!--                        <div class="yfmblist-haeder-item">-->
                        <!--                            负责人信息-->
                        <!--                        </div>-->
                        <div class="yfmblist-haeder-item">
                            行业分类
                        </div>
                    </div>
                    <div class="yfmblist-body">

                        <div v-for="(item,index) in supplierlist" class="yfmblist-body-list">
                            <div class="yfmblist-haeder-item">
                                <label>
                                    <input :checked="IsChecked(item)" type="checkbox" @click="GetCheckboxs(item)">
                                    <p v-cloak>{{ item.title }}</p>
                                </label>
                            </div>
                            <!--                            <div v-cloak class="yfmblist-haeder-item">-->
                            <!--                                {{ item.name + ' ' + item.tel }}-->
                            <!--                            </div>-->
                            <div v-cloak class="yfmblist-haeder-item">
                                {{ item.catname }}
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </el-drawer>


    </div>
</template>


<script setup>
/**
 * 组件引入
 */
import {onMounted, reactive, ref} from 'vue'
import http from "../../api/api.js"
import msg from "../../utils/Message.js"
import UploadImgs from "../../components/UploadImgs.vue"
import TEditor  from "../../components/editor.vue";
/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */



var type = ref('2')

var input = ref('')

var content = ref('')

var dialogVisible = ref(false)

var items = reactive([
    {
        title: "",
        scoke: "",
        num: "",
    }
])

var supplier = reactive([])
var supplierlist = reactive([
    {
        id: 1,
        title: "雷鸣网络",
        name: "王",
        tel: "13165122657",
        catname: "it",
    }, {
        id: 2,
        title: "国家电网",
        name: "王",
        tel: "13165122657",
        catname: "it",
    }, {
        id: 3,
        title: "国家电网",
        name: "王",
        tel: "13165122657",
        catname: "it",
    }, {
        id: 4,
        title: "国家电网",
        name: "王",
        tel: "13165122657",
        catname: "it",
    }, {
        id: 5,
        title: "国家电网",
        name: "王",
        tel: "13165122657",
        catname: "it",
    }
])

var options = reactive([
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
])

var data = reactive({
    account: "",
    password: "",
    code: "",
    suppername: "",
    logo: "",
    lolgsrc: "",
    cate: 0,
    address: "",
    name: "",
    zhiwei: "",
    tel: "",

})

/**
 * 页面挂载后
 */
onMounted(() => {
    // initPageData();
});


/**
 * 方法区
 */

const getContent = (v) => {
    content.value = v
}


function IsChecked(item) {

    console.log(item)
    if (dialogVisible.value) {

        let Index = supplier.findIndex(i => i.suppid == item.id);
        // console.log
        if (Index != -1) {
            return true
        }

    }

}

function GetCheckboxs(item) {


    var obj = {}
    obj.suppid = item.id
    obj.title = item.title
    obj.name = item.name
    obj.tel = item.tel
    obj.catname = item.catname
    let Index = supplier.findIndex(i => i.suppid == item.id);
    if (Index == -1) {
        supplier.push(obj)
    } else {
        supplier.splice(Index, 1);
    }

}

function NoArrays(index) {
    // let length = supplier.length;
    // if (length == 1) {
    //     msg.notice('请选择供应商！', 'error', 3000)
    //     return
    // }
    supplier.splice(index, 1)
}


//--------商品添加删除
function addNewArray() {
    let length = items.length;

    let title = items[length - 1].title
    let scoke = items[length - 1].scoke
    let num = items[length - 1].num
    if (title == "" || scoke == "" || num == "") {
        msg.notice('必填项不能为空！', 'error', 3000)
        return
    }


    let obj = {
        title: "",
        scoke: "",
        num: "",
    }

    items.push(obj);

}

//
function NoArray(index) {
    let length = items.length;
    if (length == 1) {
        msg.notice('请填写！', 'error', 3000)
        return
    }
    items.splice(index, 1)
}

// 初始化数据
const initPageData = () => {
    http.HttpGet("GetDocumentClassIndex").then((res) => {
        initData.loading = false
        if (res.code == 0) {
            initData.list = res.data
            msg.message(res.msg)
        } else {
            msg.message(res.msg, 'error')
        }
    })
}

function handleClose(done) {
    done();
}

</script>

<style lang="scss" scoped>
@import '../../assets/scss/index.scss';
</style>

